<template>
  <div :style="{'left':leftVal}" class="list">
    <div class="head">
      <a href="javascript:;" @click="closeList">
        <i class="iconfont icon-fanhui"/>
      </a>{{ title.title }}
    </div>
    <h2><span>{{ title.name }}</span> <span> {{ title.value }}</span></h2>

    <!-- <scroller :on-refresh="refresh" :on-infinite="infinite" style="top:1rem;height:88%!important">
      <ul>
        <li v-for="item in items" :key="item.id"><span class="order-number">{{ item.name }}</span><div class="list-right"><span class="date">{{ item.date }}</span><span>{{ item.value | formatNum }}</span></div><i class="iconfont icon-gengduo"/></li>
      </ul>
    </scroller> -->
    <ul>
      <li v-for="item in listData" :key="item.id">
        <span class="order-number">{{ item.name }}</span>
        <div class="list-right">
          <span class="date">{{ item.date }}</span>
          <span>{{ item.value | formatNum }}</span>
        </div>
      <i class="iconfont icon-gengduo" @click="toListDetail(item)"/></li>
    </ul>

  </div>

</template>
<script>
import common from '../../assets/js/common.js'
// import qs from 'qs'
export default {
  filters: {
    formatNum (val) {
      return common.formatNum(val)
    }
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    leftVal: {
      type: String,
      default: '100%'
    },
    listData: {
      type: Array,
      default: function () {
        return []
      }
    },
    title: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      items: []
    }
  },
  mounted () {
    console.log(this.listData)
    // this.$api.post(this.url, qs.stringify({

    // })).then((res) => {
    //   if (res.status === 200) {
    //     for (var i = 1; i <= 15; i++) {
    //       this.items.push({name: 'PC955019070351216640', value: '8207', date: '2013 - 07 - 08'})
    //       // this.items.push(i + ' - keep walking, be 2 with you.')
    //     }
    //     this.top = 1
    //     this.bottom = 20
    //   }
    // })
    // for (var i = 1; i <= 15; i++) {
    //   this.items.push({name: 'PC955019070351216640', value: '8207', date: '2013 - 07 - 08'})
    //   // this.items.push(i + ' - keep walking, be 2 with you.')
    // }
    // this.top = 1
    // this.bottom = 20
  },
  methods: {
    closeList () {
      this.$emit('closeList')
    },
    toListDetail (item) {
      this.$emit('toListDetail', item)
    }
    // refresh: function (done) {
    //   console.log(done)
    //   var self = this
    //   setTimeout(function () {
    //     var start = self.top - 1
    //     for (var i = start; i > start - 10; i--) {
    //       self.items.splice(0, 0, {name: 'PC955019070351216640', value: '8207', date: '2013 - 07 - 08'})
    //     }
    //     self.top = self.top - 10
    //     done()
    //   }, 1500)
    // },

    // infinite: function (done) {
    //   var self = this
    //   setTimeout(function () {
    //     var start = self.bottom + 1
    //     for (var i = start; i < start + 10; i++) {
    //       self.items.push({name: 'PC955019070351216640', value: '8207', date: '2013 - 07 - 08'})
    //     }
    //     self.bottom = self.bottom + 10
    //     done()
    //   }, 1500)
    // }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/mixin';
  .list {
    position: fixed;
    top:0;
    width:100%;
    height:100%;
    z-index:1100;
    background: -webkit-gradient(linear, left top, left bottom, from(#0e0a2e), to(#251f5b));
    background: linear-gradient(#0e0a2e, #251f5b);
    @include transition(left);
    overflow-y: auto;
    .head {
      background: #1260f6;
      line-height: .80rem;
      position: absolute;
      width: 100%;
      z-index: 1000;
    }
    h2 {
      display: flex;
      display: -webkit-flex;
      padding-top: 1.20rem;
      border-bottom: .02rem solid rgba(230,229,232,.3);
      padding-bottom: .20rem;
      span {
        flex:1;
        -webkit-flex:1;
        text-align: center;
        color:#65c4ea;
        font-size: .32rem;
      }
    }
    ._v-content{
      margin-top: 1rem;
    }
    ul {
      // margin-top: .80rem;
      li {
        display: flex;
        display: -webkit-flex;
        line-height: .80rem;
        border-bottom: .02rem solid rgba(230,229,232,.3);
         padding:.10rem 3%;
         .list-right {
            text-align: right;
            flex:1;
            -webkit-flex:1;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
             -webkit-align-items: center;
            span {
              display: block;
              color:#65c4ea;
              font-size: .28rem;
              line-height: .50rem;
              width: 100%;
              &.date {
                color:rgba(101, 196, 234, .48);
              }
            }
         }
        span.order-number {
          font-size: .28rem;
          color:#65c4ea;
           text-align: left;
            line-height: 1rem;
            text-indent: .2rem;
            display: flex;
            display: -webkit-flex;
            -webkit-align-items: center;

        }
        .icon-gengduo{
          font-size:.32rem;
          color:#65c4ea;
          text-align: center;
          width: .6rem;
          @include center();
        }
      }
    }
  }
</style>
